﻿<cms-page-header cms-title="Product"></cms-page-header>

<cms-form cms-name="mainForm"
          cms-edit-mode="vm.editMode"
          ng-submit="vm.save()"
          cms-loading="vm.formLoadState.isLoading">

    <!-- Default toolbar -->
    <cms-page-actions ng-show="!vm.editMode">

        <cms-button class="main-cta"
                    cms-text="Edit"
                    ng-click="vm.edit()"
                    ng-show="!vm.editMode"
                    ng-disabled="vm.globalLoadState.isLoading"
                    ng-if="::vm.canUpdate"></cms-button>

    </cms-page-actions>

    <!-- Edit toolbar -->
    <cms-page-actions ng-show="vm.editMode">

        <cms-button-submit cms-text="Save"
                           ng-show="vm.editMode"
                           ng-disabled="vm.mainForm.$invalid || vm.globalLoadState.isLoading"
                           cms-loading="vm.saveLoadState.isLoading"></cms-button-submit>

        <cms-button cms-text="Cancel"
                    ng-click="vm.cancel()"
                    ng-show="vm.editMode"
                    ng-disabled="vm.globalLoadState.isLoading"></cms-button>

    </cms-page-actions>

    <!-- Scrollable content area -->
    <cms-page-body cms-content-type="form">

        <cms-form-status></cms-form-status>

        <!--MAIN-->
        <cms-form-section cms-title="Test Data">

            <cms-form-field-text cms-title="Title"
                                 cms-model="vm.command.title"
                                 maxlength="32"
                                 required></cms-form-field-text>

            <cms-form-field-text cms-title="Ref"
                                 cms-model="vm.command.ref"
                                 maxlength="32"
                                 required></cms-form-field-text>

            <cms-form-field-test-selector cms-title="Test Selection"
                                          cms-model="vm.command.test"></cms-form-field-test-selector>


        </cms-form-section>


    </cms-page-body>

</cms-form>